<template>
	<view>
		<view class="statbar"></view>
		<u-navbar :title="navText" :autoBack="true">
		</u-navbar>
		<view style="margin-top: 50px;">
			<view v-for="(item,index) in vodList">
				<view style="height: 120px;margin: 10px;clear: both;">
					<view style="float: left;">
						<image class="cover" :src="item.vodPic">
						</image>
						<view class="renew" >{{item.vodRemarks}}</view>
					</view>
					<view class="desc">
						<view style="font-size: 14px;align-items: center;justify-content: center;line-height: 25px;">
							<view class="txt">{{item.vodName}}</view>
							<view class="tag">{{item.typeName}}</view>
			
						</view>
						<view class="subTxt">{{item.vodArea}} {{item.vodYear}}</view>
						<view class="subTxt">导演: {{item.vodDirector}}</view>
						<view class="subTxt">演员: {{item.vodActor}}</view>
						<view class="subTxt">类型: {{item.vodClass}}</view>
						<u-button class="btn" type="primary" size="small" text="立即播放" @click="toDetail(item)">
						</u-button>
						
					</view>
			
				</view>
			</view>
			<view style="clear: both;margin: 30px;">
				<u-loadmore :status="status" :line="isShowLine" :nomoreText="nomoreText" loadingIcon="spinner" />
			</view>
		</view>
		
	</view>
</template>

<script>
	import {
		getVodSearch
	} from '../../config/api.js';
	export default {
		data() {
			return {
				showBorder: false,
				current: 1,
				totalPages: 0,
				vodList: [],
				refreshVodList: [],
				isShowLine: false,
				status: 'loadmore',
				nomoreText: '',
				keyword: ''
			}
		},
		onLoad(option) {
			this.keyword = option.keyword;
			this.navText = option.navText;
			this.findVodPage();
		},
		onReachBottom() {
			if (this.current >= this.totalPages) return;
			this.status = 'loading';
			this.current = ++this.current;
			var that = this
			setTimeout(() => {
				if (that.current >= that.totalPages) {
					that.status = 'nomore';
				} else {
					that.status = 'loading';
					that.isShowLine = false;
				}
				that.findVodPage();
				that.vodList = that.vodList.concat(that.refreshVodList)

			}, 10)
		},
		methods: {
			toDetail(item) {
				if(uni.getStorageSync('playerSet') == 1){
					uni.$u.route({
						url: 'pages/dplayer/dplayer',
						params: {
						vodInfo: encodeURIComponent(JSON.stringify(item))
						}
					})
				}else{
					uni.$u.route({
						url: 'pages/detail/detail',
						params: {
						vodInfo: encodeURIComponent(JSON.stringify(item))
						}
					})
				}
			},
			findVodPage() {
				this.isShowLine = false;
				var that = this
				// get请求
				getVodSearch("?current=" + that.current + "&size=15&keyword=" + this.keyword).then((res) => {
					that.totalPages = res.pages;
					if (that.current == 1) {
						that.vodList = res.records;
					}else{
						that.current == 2
						that.findVodPage();
					}
					if (that.current >= that.totalPages) {
						setTimeout(() => {
							that.status = 'nomore';
							that.nomoreText = "没有更多数据了"
							that.isShowLine = true;
						}, 10);
					}

				}).catch(() => {

				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.statbar {
		height: var(--status-bar-height);
		background: #FFFFFF;
	}

	.cover {
		width: 85px;
		height: 120px;
		border-radius: 2px;
		position: relative;
	}

	.renew {
		position: relative;
		width: 80px;
		color: #FFFFFF;
		font-size: 12px;
		top: -30px;
		text-align: right;
		padding-left: 5rpx;
		right: 5rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.desc {
		float: left;
		width: calc(100% - 95px);
		margin: 0px 5px 5px 5px;
	}

	.tag {
		text-align: center;
		vertical-align: middle;
		margin: 5px;
		width: 40px;
		line-height: 16px;
		font-size: 10px;
		color: #ffffff;
		float: left;
		background-color: #909399;
	}

	.txt {
		float: left;
		font-size: 14px;
		padding-left: 5px;
		max-width: 80%;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.subTxt {
		clear: both;
		font-size: 12px;
		padding: 0 5px 0 5px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}


	.btn {
		margin-top: 2px;
		width: 30px;
		position: absolute;
		left: 105px;
		height: 25px;
	}
</style>
